<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试页面2</title>
  <link rel="stylesheet" href="./css/text2.css">
</head>
<STyle>
  body {
    background-color: #ff008c;
  }

  .tilte {
    font-family: sans-serif;
    font-size: 10rem;
    color: aqua;
    font-weight: 900;
    cursor: pointer;
  }

  .tilte span {
      font-size: 10rem;
      color: aliceblue;
    }
</STyle>

<body>

  <div class="loading">
    <svg viewbox='0 0 50 50'>
        <circle r='25' cx='25' cy='25'></circle>
    </svg>
    <p>LOADING</p>
</div>
<p onclick="loading.in('./1.html')" class="title">PAGE <span>2</span>
</p>

  <script src="./js/vue.js"></script>  

</body>
<script>
  // JIEJOE produce
  // b站主页：https://space.bilibili.com/3546390319860710
  const loading = {
      container: document.querySelector(".loading"),
      in(target) {
          this.container.classList.remove("loading_out");
          setTimeout(() => {
              window.location.href = target;
          }, 1000)
      },
      out() {
          this.container.classList.add("loading_out");
      }
  };
  window.addEventListener("load", () => {
      loading.out();
  })
</script>
</html>